<template>
  <div class="step-main flex">
    <div class="step-left">
      <SettingSwitch :title="'S3 Gateway'" v-model="S3Gateway.able" class="step-switch" :cusFontSize="'32'"/>
      <div>
        <SettingInput :title="'Listen On'" v-model="S3Gateway.ListenOn" :placeholder="'0.0.0.0'"/>
        <SettingInput :title="'Port'" v-model="S3Gateway.Port" :placeholder="'8090'"/>
      </div>
      <SettingInput :title="'AccessKey'" v-model="S3Gateway.AccessKey" :placeholder="'<your-access-key>'"/>
      <SettingInput :title="'SecretKey'" v-model="S3Gateway.SecretKey" :placeholder="'<your-secret-key>'"/>
    </div>
    <div class="step-right">
      <SettingSwitch :title="'WebDEV'" v-model="WebDEV.able" class="step-switch" :cusFontSize="'32'"/>
      <div>
        <SettingInput :title="'ListenOn'" v-model="WebDEV.ListenOn" :placeholder="'0.0.0.0'"/>
        <SettingInput :title="'Port'" v-model="WebDEV.Port" :placeholder="'80'"/>
      </div>
      <SettingInput :title="'WebDEV User'" v-model="WebDEV.WebDAVUser" :placeholder="'<your-access-key>'"/>
      <SettingInput :title="'SecretKey'" v-model="WebDEV.WebDAVPassword" :placeholder="'<your-secret-key>'"/>
    </div>
  </div>
</template>

<script setup>
import SettingSwitch from '@/components/fsConfig/SettingSwitch'
import SettingInput from '@/components/fsConfig/SettingInput'
import {reactive} from "vue";

let S3Gateway = reactive({
  able: false,
  ListenOn: null,
  Port: null,
  AccessKey: null,
  SecretKey: null
})

let WebDEV = reactive({
  able: false,
  ListenOn: null,
  Port: null,
  WebDAVUser: null,
  WebDAVPassword: null
})


</script>

<style scoped>
@import "@/style/settingWarp.css";
.step-main {
  justify-content: space-evenly;
}
.step-left, .step-right {
  width: 25%;
  border: 1px solid var(--settingBorderColor);
  padding: 40px;
  border-radius: 10px;
}
.step-switch {
  margin-bottom: 20px;
  font-size: 30px;
}
</style>
